<template>
  <el-autocomplete
    v-bind="$attrs"
    :value="value"
    v-on="$listeners"
    :fetch-suggestions="querySearch"
  >
    <slot name="prefix" slot="prefix"></slot>

    <slot></slot>

    <slot name="suffix" slot="suffix"></slot>
  </el-autocomplete>
</template>
<script>
export default {
  name: 'CAutocomplete',
  components: {},
  props: {
    value: {
      default: '',
    },
  },
  data() {
    return {}
  },
  computed: {
    options() {
      return this.$attrs.options || []
    },
    valueKey() {
      return this.$attrs.valueKey || 'value'
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    querySearch(v, cb) {
      cb(
        v
          ? this.options.filter(
              option => option[this.valueKey] && option[this.valueKey].indexOf(v) > -1
            )
          : this.options
      )
    },
  },
}
</script>
<style scoped></style>
